<template>
    <div class="MyLikeRecord">
        <div class="MyLikeRecord-Header">
            <van-nav-bar title="历史订单" left-arrow @click-left="$router.back()" />
        </div>
        <div class="MyLikeRecord-Body">
            <div class="MyLikeRecord-record">
                <div class="record-time">
                    <h1> - 今天 - </h1>
                </div>
                <div class="order" v-for="(item, index) in historyOrder" :key="index" v-if="historyOrder">
                    <div class="MyLikeRecord-item" v-for="data in item.itemIist">
                        <div class="item-imgBox">
                            <img :src="data.img">
                        </div>
                        <div class="item-com">
                            <h3 class="item-title txt-cut">{{ data.name }}</h3>
                            <p style="text-align: right;">x{{ data.count }}</p>
                        </div>
                    </div>
                    <p style="text-align: right;margin-right: 15px;padding-bottom: 10px;">总价: <span
                            style="color: rgb(255, 0, 0);">￥{{ item.money }}</span>
                    </p>
                </div>

            </div>
        </div>
        <!-- <div class="MyLikeRecord-footer">
            <div class="MyLikeRecord-tips">
                <span>
                    为你保留最近30天的点赞记录
                    <br>
                    喜欢的内容记得收藏，方便随时回看哦

                </span>
            </div>
        </div> -->
    </div>
</template>
<script lang="ts" >

import { defineComponent } from 'vue';
import { historyOrderStore } from '@/stores/shopCar'

export default defineComponent({
    setup() {
        let historyOrder: any = historyOrderStore().$state.historyOrder
        return {
            historyOrder
        }
    }
})
</script>

<style lang="scss" scoped>
.item-title {
    margin-left: 10px;
}

.order {
    margin: 20px 0;
    border: 1px solid;
    border-radius: 10px;
}

.MyLikeRecord {
    .MyLikeRecord-Header {
        :deep(.van-nav-bar) {
            .van-nav-bar__content {
                height: 35px;

                .van-nav-bar__left {
                    i {
                        font-size: 18px;
                        color: #000;
                    }
                }

                .van-nav-bar__title {
                    font-weight: normal;
                }
            }

        }
    }

    .MyLikeRecord-Body {
        // min-height: 94vh;
        padding: 10px 12px 0;

        .MyLikeRecord-record {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .record-time {
                margin-bottom: 6px;

                h1 {
                    font-size: 12px;
                    color: #999999;
                }
            }

            .MyLikeRecord-item {
                display: flex;
                height: 106px;
                align-items: center;
                // border-bottom: 1px solid #f5f5f5;
                padding: 0 10px;
                box-sizing: border-box;

                .item-com {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    justify-content: space-around;
                    margin-right: 20px;

                    h3 {
                        font-size: 16px;
                        word-wrap: break-word;
                        word-break: break-all;
                    }

                    span {
                        font-size: 12px;
                        color: #999;
                        transform: scale(0.9);
                        transform-origin: left;
                    }
                }

                .item-imgBox {
                    width: 76px;
                    height: 76px;
                    flex-shrink: 0;
                    overflow: hidden;
                    border-radius: 4px;

                    img {
                        object-fit: cover;
                    }
                }
            }
        }
    }

    .MyLikeRecord-footer {
        margin-top: 12px;

        .MyLikeRecord-tips {
            text-align: center;
            font-size: 12px;
            color: #999;
            transform: scale(0.9);
        }
    }
}
</style>